<script setup lang="ts">
import { onMounted } from "vue";

// 定义接受props参数
// Vue 3.5+的版本的用法
// const { age = 10 } = defineProps<{
//     name: string
//     age?: number
// }>()
// Vue 3.5以下的默认值的设置方式
const props = withDefaults(
  defineProps<{ username: string; age?: number; func?(count: number): void }>(),
  // 第三个参数为默认值
  {
    username: "默认值",
    age: 100,
  }
);

const test = () => {
  // 这里面拿到的是最新的传递过来的数据
  console.log(props.username, props.age);
};
onMounted(() => {
  test();
});

// 自定义事件类型
// updateChange-参数1个 number类型
const emits = defineEmits<{
  // key(事件名称): value(参数类型数组)
  updateAge: [age: number];
  updateName: [username: string];
  updateAll: [age: number, username: string];
}>();
// 实现子传父
const toParent = () => {
  emits("updateAge", props.age - 1);
};
const toParentName = () => {
  emits("updateName", props.username + "1");
};
</script>

<template>
  <div class="child">
    <h2>子组件显示父组件传递过来的数据</h2>
    <p>{{ username }}</p>
    <p>{{ age }}</p>
    <button @click="func(age - 1)">子传父-回调函数形式</button>
    <button @click="toParent">子传父-emits形式</button>
    <button @click="toParentName">子传父-改名称</button>
    <button @click="emits('updateAll', age + 1, username + '1')">
      子传父-改所有
    </button>
  </div>
</template>

<style scoped></style>
